<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>24种表单input输入框聚焦动画特效|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<link href='https://fonts.googleapis.com/css?family=Lato:400,300,700,900' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" type="text/css" href="css/input-style.css">
	<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>24种表单input输入框聚焦动画特效 <span>A set of awesome input focus effects</span></h1>
			<div class="htmleaf-links">
				<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
				<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/css3/ui-design/201604253388.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
			</div>
		</header>
		<div class="row">
		    <div class="container">
		    	<h2>Border effects</h2>
		    	<div class="col-3">
		        	<input class="effect-1" type="text" placeholder="Placeholder Text">
		            <span class="focus-border"></span>
		        </div>
		        <div class="col-3">
		        	<input class="effect-2" type="text" placeholder="Placeholder Text">
		            <span class="focus-border"></span>
		        </div>
		        <div class="col-3">
		        	<input class="effect-3" type="text" placeholder="Placeholder Text">
		            <span class="focus-border"></span>
		        </div>

		        <div class="col-3">
		        	<input class="effect-4" type="text" placeholder="Placeholder Text">
		            <span class="focus-border"></span>
		        </div>
		        <div class="col-3">
		        	<input class="effect-5" type="text" placeholder="Placeholder Text">
		            <span class="focus-border"></span>
		        </div>
		        <div class="col-3">
		        	<input class="effect-6" type="text" placeholder="Placeholder Text">
		            <span class="focus-border"></span>
		        </div>

		        <div class="col-3">
		        	<input class="effect-7" type="text" placeholder="Placeholder Text">
		            <span class="focus-border">
		            	<i></i>
		            </span>
		        </div>
		        <div class="col-3">
		        	<input class="effect-8" type="text" placeholder="Placeholder Text">
		            <span class="focus-border">
		            	<i></i>
		            </span>
		        </div>
		        <div class="col-3">
		        	<input class="effect-9" type="text" placeholder="Placeholder Text">
		            <span class="focus-border">
		            	<i></i>
		            </span>
		        </div>

		        <h2>Background Effects</h2>
		        <div class="col-3">
		        	<input class="effect-10" type="text" placeholder="Placeholder Text">
		            <span class="focus-bg"></span>
		        </div>
		        <div class="col-3">
		        	<input class="effect-11" type="text" placeholder="Placeholder Text">
		            <span class="focus-bg"></span>
		        </div>
		        <div class="col-3">
		        	<input class="effect-12" type="text" placeholder="Placeholder Text">
		            <span class="focus-bg"></span>
		        </div>
		        <div class="col-3">
		        	<input class="effect-13" type="text" placeholder="Placeholder Text">
		            <span class="focus-bg"></span>
		        </div>
		        <div class="col-3">
		        	<input class="effect-14" type="text" placeholder="Placeholder Text">
		            <span class="focus-bg"></span>
		        </div>
		        <div class="col-3">
		        	<input class="effect-15" type="text" placeholder="Placeholder Text">
		            <span class="focus-bg"></span>
		        </div>

		        <h2>Input with Label Effects</h2>
		        <div class="col-3 input-effect">
		        	<input class="effect-16" type="text" placeholder="">
		            <label>First Name</label>
		            <span class="focus-border"></span>
		        </div>
		        <div class="col-3 input-effect">
		        	<input class="effect-17" type="text" placeholder="">
		            <label>First Name</label>
		            <span class="focus-border"></span>
		        </div>
		        <div class="col-3 input-effect">
		        	<input class="effect-18" type="text" placeholder="">
		            <label>First Name</label>
		            <span class="focus-border"></span>
		        </div>

		        <div class="col-3 input-effect">
		        	<input class="effect-19" type="text" placeholder="">
		            <label>First Name</label>
		            <span class="focus-border">
		            	<i></i>
		            </span>
		        </div>
		        <div class="col-3 input-effect">
		        	<input class="effect-20" type="text" placeholder="">
		            <label>First Name</label>
		            <span class="focus-border">
		            	<i></i>
		            </span>
		        </div>
		        <div class="col-3 input-effect">
		        	<input class="effect-21" type="text" placeholder="">
		            <label>First Name</label>
		            <span class="focus-border">
		            	<i></i>
		            </span>
		        </div>

		        <div class="col-3 input-effect">
		        	<input class="effect-22" type="text" placeholder="">
		            <label>First Name</label>
		            <span class="focus-bg"></span>
		        </div>
		        <div class="col-3 input-effect">
		        	<input class="effect-23" type="text" placeholder="">
		            <label>First Name</label>
		            <span class="focus-bg"></span>
		        </div>
		        <div class="col-3 input-effect">
		        	<input class="effect-24" type="text" placeholder="">
		            <label>First Name</label>
		            <span class="focus-bg"></span>
		        </div>
		    </div>
		</div>
		<div class="related">
		    <h3>如果你喜欢这个插件，那么你可能也喜欢:</h3>
		    <a href="http://www.htmleaf.com/jQuery/Form/201509212600.html">
			  <img src="related/1.jpg" width="300" alt="跨浏览器的jQuery表单浮动标签插件"/>
			  <h3>跨浏览器的jQuery表单浮动标签插件</h3>
			</a>
			<a href="http://www.htmleaf.com/html5/SVG/201503191544.html">
			  <img src="related/2.jpg" width="300" alt="12种炫酷HTML5 SVG和CSS3表单浮动标签特效"/>
			  <h3>12种炫酷HTML5 SVG和CSS3表单浮动标签特效</h3>
			</a>
		</div>
	</div>

	<script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
	<script>
	// JavaScript for label effects only
		$(window).load(function(){
			$(".col-3 input").val("");

			$(".input-effect input").focusout(function(){
				if($(this).val() != ""){
					$(this).addClass("has-content");
				}else{
					$(this).removeClass("has-content");
				}
			})
		});
	</script>
</body>
</html>
